<template>
    <div class="InvitationCode" :style="'min-height: '+docheight+'px'">
        <div v-if="!showTimeOut&&showCont">
            <div class="codeHead">
                <div class="formCont">
                    <div class="formItem">
                        <div class="formHead">当前可提现</div>
                        <div class="formText">{{ subMoney }}</div>
                        <!-- <div class="formText">{{Number(subMoney.integral).toFixed(2)}}</div> -->
                    </div>
                    <save-btn style="margin:1rem 0 0.5rem;width: 100%;" @saveClick="showMaskFn" color="#4fc763" value="申请提现"></save-btn>
                    <div class="formTip">*提现规则:提现金额满1000即可提现。</div>
                    <div class="formTip">*累计提现:累计到5000金额提现，可额外奖励80元；</div>
                    <div class="formTip">*累计提现:累计到10000金额提现，可额外奖励200元</div>
                </div>
            </div>
            <div class="orderCont">
                <div class="listTip">明细记录</div>
                <div class="listNav">
                    <div :class="navId==index?'navItem navActive':'navItem'" @click="navFn(index)" :key="index" v-for="(item,index) in navArr">{{item.val}}</div>
                </div>
                <div class="codeUserList" v-if="navId==0">
                    <div class="codeUserItem" :key="index" v-for="(item,index) in integalArr">
                        <div class="listNum">订单单号：{{ item.bill_number }}</div>
                        <div class="subMoney">
                            <div class="carLeft">
                                <div class="userName">
                                    <span>{{ item.bill_name }}</span>  
                                </div>
                                <div class="userTime">
                                    流水类型：
                                    <span v-if="item.bill_type==1">项目提成</span>
                                    <span v-if="item.bill_type==2">好评奖金</span>
                                    <span class="redText" v-if="item.bill_type==3&&item.bill_name=='提现申请'">发起提现</span>
                                    <span class="redText" v-if="item.bill_type==3&&item.bill_name=='提现驳回'">退回余额</span>
                                 </div>
                                <div class="userTime">账户余额：{{ item.after_change_balance }}</div>
                                <div class="userTime">操作时间：{{ item.create_time }}</div>
                            </div>
                            <div class="integralNum" v-if="item.bill_type==1||item.bill_type==2">+{{ item.bill_money }}</div>
                            <div class="integralNum greenNum" v-if="item.bill_type==3&&item.bill_name=='提现驳回'">+{{ item.bill_money }}</div>
                            <div class="integralNum redNum" v-if="item.bill_type==3&&item.bill_name=='提现申请'">-{{ item.bill_money }}</div>
                        </div>
                    </div>
                </div>
                <div class="codeUserList" v-if="navId==1">
                    <div class="codeUserItem" :key="index" v-for="(item,index) in integalArr">
                        <div class="listNum">
                            <span>提现单号：{{ item.withdrawal_number }}</span>
                            <span class="blueText" v-if="item.status==1">审核中</span>
                            <span class="greenText" v-if="item.status==2">已打款</span>
                            <span class="redText" v-if="item.status==3">已驳回</span>
                        </div>
                        <div class="subMoney">
                            <div class="carLeft">
                                <div class="userTime">申请时间：{{ item.create_time }}</div>
                                <div class="userTime">处理时间：{{ item.examine_time }}</div>
                                <div class="userTime">提现备注：{{item.remark}}</div>
                            </div>
                            <div class="integralNum">-{{ item.money }}</div>
                            <!-- <div class="integralNum" v-if="item.status==2">-{{ item.money }}</div>
                            <div class="integralNum" v-if="item.status==3">-{{ item.money }}</div> -->
                        </div>
                    </div>
                </div>
                <div class="codeUserList" v-if="navId==2">
                    <div class="codeUserItem" :key="index" v-for="(item,index) in integalArr">
                        <div class="listNum">保证金变更单号：{{ item.bill_number }}</div>
                        <div class="subMoney">
                            <div class="carLeft">
                                <div class="userName">
                                    <span>{{ item.bill_name }}</span>  
                                </div>
                                <div class="userTime">扣除原因：{{ item.bill_remark }}</div>
                                <div class="userTime">剩余保证金：{{ item.after_change_balance }}</div>
                                <div class="userTime">操作时间：{{ item.create_time }}</div>
                            </div>
                            <div class="integralNum">-{{ item.bill_money }}</div>
                        </div>
                    </div>
                </div>
                <div class="noListTip" v-if="isChageNav">数据请求中~</div>
                <div class="noListTip" v-if="integalArr.length>0&&!isChageNav">{{ loadMoreText }}</div>
                <div class="noListTip" v-if="integalArr.length==0&&!isChageNav">暂无更多记录数据</div>
            </div>
            <sub-load v-if="showLoad"></sub-load>
        </div>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
        <getLoad v-if="!showCont"></getLoad>
        <getTimeOut v-if="showTimeOut"></getTimeOut>
        <van-popup v-model:show="showMask" round position="bottom">
            <div class="orderMask">
                <div class="maskTitle">提现提示</div>
                <div class="maskTip">客服微信：whasd666</div>
                <div class="maskTip">点击确认提现后，添加上方客服微信，经客服核实通过，即可提现成功！</div>
                <saveBtn color="#4fc763" style="width: 100%;" value="申请提现" @saveClick="saveFn"></saveBtn>
            </div>
        </van-popup>
        <footcpm></footcpm>
    </div>
  </template>
  
  <script>
    import {Toast } from 'vux'
    import SaveBtn from '@/components/public/saveBtn.vue'
    import subLoad from '@/components/public/subLoad.vue'
    import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    import nodata from '@/components/public/nodata'
    import footcpm from "@/components/footcpm";

    import { getRawal,withdrawal,fundDetails,withdrawalRecord } from '@/http/api'
    export default {
      components: {footcpm,getTimeOut,getLoad,subLoad,Toast,SaveBtn,nodata},
      data() {
        return {
            showTimeOut: false,
            showCont:false,
            showLoad:false,
            showText:'',
            showToast:false,
            code:'',
            subMoney:{},
            navArr:[
                {val:'资金明细'},
                {val:'提现记录'},
                {val:'保证金明细'},
            ],
            navId:0,
            fondType:1,
            integalArr:[],
            page:1,
            per_page:5,
            last_page:0,
            getting:false,
            isChageNav:false,
            loadMoreText:'数据加载中~',
            showMask:false,
        }
      },
      props: {},
      methods:{
        navFn(index){
            this.navId = index
            this.page = 1
            this.last_page = 0
            this.integalArr = []
            if(index==0){
                this.fondType = 1
                this.getFundFn()
            }else if(index==1){
                this.getRecord()
            }else if(index==2){
                this.fondType = 2
                this.getFundFn()
            }
        },
        showMaskFn(){
            if(Number(this.subMoney)<1000){
                this.showToast = true
                this.showText = '提现金额不得低于1000'
                return false
            }else{
                this.showMask = true
            }
        },
        saveFn(){
          let data ={}
          this.showMask = false
          if(!this.showLoad){
              this.showLoad = true
              withdrawal(data).then((res)=>{
                  if(res.data.code==1){
                      this.getData()
                      this.showToast = true
                      this.showText = '申请成功'
                  }else{
                        this.showToast = true
                        this.showText = res.data.msg
                  }
                  this.showLoad = false
              }).catch((err)=>{
                  this.showLoad = false
                  this.showToast = true
                  this.showText = '网络超时'
              })
          }
        },
        getData(){
            getRawal().then((res)=>{
                this.showCont= true
                if(res.data.code==1){
                    this.subMoney= res.data.data
                }else{
                    this.showToast = true
                    this.showText = '数据获取失败'
                }
            }).catch(()=>{
          this.showTimeOut = true
          this.showCont= true
        })
        },
        getRecord(){
            let data = {
                page:this.page,
                per_page:this.per_page,
            }
            this.isChageNav = true
            withdrawalRecord(data).then((res)=>{
                if(res.data.code==1){
                    let arr = res.data.data.data
                    for(let i=0;i<arr.length;i++){
                        this.integalArr.push(arr[i])
                    }
                    setTimeout(() => {
                        this.getting = false
                    }, 100);
                    this.last_page = res.data.data.last_page
                    if(this.page==this.last_page){
                        this.loadMoreText = '到底啦～'
                    }else{
                        this.loadMoreText = '数据加载中~'
                    }
                    this.isChageNav = false
                }else{
                    this.showToast = true
                    this.showText = '数据获取失败'
                }
            }) 
        },
        getFundFn(){
            let data = {
                page:this.page,
                type:this.fondType,
                per_page:this.per_page,
            }
            this.isChageNav = true
            fundDetails(data).then((res)=>{
                if(res.data.code==1){
                    let arr = res.data.data.data
                    for(let i=0;i<arr.length;i++){
                        this.integalArr.push(arr[i])
                    }
                    setTimeout(() => {
                        this.getting = false
                    }, 100);
                    this.last_page = res.data.data.last_page
                    if(this.page==this.last_page){
                        this.loadMoreText = '到底啦～'
                    }else{
                        this.loadMoreText = '数据加载中~'
                    }
                    this.isChageNav = false
                }else{
                    this.showToast = true
                    this.showText = '数据获取失败'
                }
            })
        },
        nextfn(){
            if(this.$route.path=='/subList'){
                let h = document.documentElement.scrollHeight||document.body.scrollHeight
                let wh = document.documentElement.clientHeight||document.body.clientHeight
                let top = document.documentElement.scrollTop||document.body.scrollTop
                let bottom = h-wh-top
                if(bottom<=50){
                if(this.getting==false){
                    if(this.last_page>this.page){
                        this.getting=  true
                        this.page++
                        if(this.navId==0){
                            this.getFundFn()
                        }else{
                            this.getRecord()
                        }
                    }
                }
                }
            }
        },
      },
      mounted(){
        window.addEventListener('scroll',this.nextfn)
      },
      created() {
        this.getFundFn()
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .InvitationCode{
    width: 100%;
    background-color: #f7f8fa;
    box-sizing: border-box;
    padding-bottom: 3.75rem;
    padding-top: 1rem;
    .codeHead{
        padding: 0.75rem;
        box-sizing: border-box;
        width: 92%;
        background-color: #fff;
        margin:0 auto 1rem;
        border-radius: 0.25rem;
        
        .formCont{
            margin: 0 auto;
            padding: 0.75rem 0;
            border-radius: 0.25rem;
            background-color: #fff;
            box-sizing: border-box;
            .formTip{
                color: #666;
                font-size: 0.6rem;
            }
            .formItem{
                text-align: center;
                font-size: 0.7rem;
                .formHead{
                    font-weight: bold;
                }
                .formText{
                    font-size: 1.5rem;
                    color: #4fc763;
                    margin-top: 0.75rem;
                }
            }
            .noBorder{
                border-bottom: none;
            }
        }
    }
    .orderCont{
        width: 92%;
        margin: 0 auto;
        padding: 0.75rem 4%;
        border-radius: 0.25rem;
        box-sizing: border-box;
        background-color: #fff;
        margin-top: 0.75rem;
        .listTip{
            font-weight: bold;
        }
        .listNav{
            width: 100%;
            display: flex;
            margin-top: 0.5rem;
            .navItem{
                width: 30%;
                text-align: center;
                background-color: white;
                border: 1px solid #4fc763;
                padding: 0.25rem 0;
                border-radius: 1rem;
                font-size: 0.6rem;
                margin-right: 0.5rem;
                color: #4fc763;
            }
            .navActive{
                background-color: #4fc763;
                color: white;
            }
        }
        .codeUserList{
        padding: 0.75rem 0;
        .codeUserItem{
              width: 100%;
            //   display: flex;
              padding: 0.5rem 0;
            //   align-items: center;
              border-top: 1px dashed #ebebeb;
              
              .listNum{
                    width: 100%;
                    color: #4fc763;
                    padding-bottom: 0.5rem;
                    font-size: 0.6rem;
                    display: flex;
                    justify-content: space-between;
                    .blueText{
                        color: #4fc763;
                    }
                    .greenText{
                        color: #85CE61;
                    }
                    .redText{
                        color: #F56C6C;
                    }
                }
              .subMoney{
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .carLeft{
                    .userName{
                        font-size: 0.7rem;
                        font-weight: bold;
                        color: #333;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        width: 100%;
                        .desTag{
                            color: #4fc763;
                        }
                    }
                    .userTime{
                        font-size: 0.6rem;
                        margin-top: 0.25rem;
                        color: #666;
                        .redText{
                            color:#F56C6C;
                        }
                    }
                  }
                  .integralNum{
                        color: #4fc763;
                        font-size: 1rem;
                    }
                    .greenNum{
                        color: #85CE61;
                    }
                    .redNum{
                        color:#F56C6C;
                    }
              }
          }
          .nodataTip{
              color: #666;
              font-size: 0.6rem;
              text-align: center;
          }
      } 
        .noListTip{
            color: #999;
            font-size: 0.6rem;
            margin-top: 1rem;
            text-align: center;
        }
    }
    .gzMask{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      color: white;
      z-index: 111;
      display: flex;
      align-items: center;
      justify-content: center;
      .gzImgCont{
        width: 50%;
        text-align: center;
        img{
          width: 100%;
          border-radius: 0.25rem;
        }
        .erweimaText{
          margin-top: 0.25rem;
        }
        .closeaErweima{
          margin-top: 0.75rem;
          border: 1px solid #fff;
          padding: 0.25rem;
          border-radius: 2rem;
        }
      }
    }
    .orderMask{
    padding: 0.75rem;
    box-sizing: border-box;
    .maskTitle{
      font-size: 0.8rem;
      font-weight: bold;
      text-align: center;
    }
    .maskTip{
      margin-top: 0.5rem;
      line-height: 1.1rem;
    }
  }
  }
  </style>
  <style>
    .InvitationCode .van-cell::after{
        border-bottom: none;
    }
    .InvitationCode .van-field__error-message{
        color: #4fc763;
    }
   .formPhone .van-field__label{
       line-height: 33px;
   }
  </style>
  